<template>
  <view>
    <view class="query-flex">
      <u-cell-item title="审批人:" :arrow="false" class="list-title"
        ><input class="list-text" type="text" :value="value"
      /></u-cell-item>
      <u-cell-item title="组织:" :arrow="false" class="list-title"
        ><input class="list-text" type="text" :value="value"
      /></u-cell-item>
      <u-cell-item title="创建时间:" :arrow="false" class="list-title"
        ><input class="list-text" type="text" :value="value"
      /></u-cell-item>
      <u-popup v-model="show" mode="bottom" length="80%">
        <u-time-line>
          <u-time-line-item nodeTop="2">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view class="u-node" style="background: #19be6b">
                <!-- 此处为uView的icon组件 -->
                <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <template v-slot:content>
              <view>
                <view class="u-order-title">待审批</view>
                <view class="u-order-desc">[用户任务2]管理员(同意)</view>
                <view class="u-order-time">2021-05-08 12:12</view>
              </view>
            </template>
          </u-time-line-item>
          <u-time-line-item>
            <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
            <template v-slot:content>
              <view>
                <view class="u-order-desc">【用户任务1】管理员(发起流程)</view>
                <view class="u-order-time">2021-05-06 22:30</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </u-popup>
      <!-- 按钮 -->
      <view class="button-con" @click="show = true">
        <view class="button-return"><view class="button">流程详情</view></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: 11,
    };
  },
};
</script>

<style lang="scss" scoped>
.u-node {
  width: 44rpx;
  height: 44rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
}

.u-order-title {
  color: #333333;
  font-weight: bold;
  font-size: 32rpx;
}

.u-order-desc {
  color: rgb(150, 150, 150);
  font-size: 28rpx;
  margin-bottom: 6rpx;
}

.u-order-time {
  color: rgb(200, 200, 200);
  font-size: 26rpx;
}
.u-time-axis {
  padding-left: 40px;
  padding-top: 10px;
}
.content {
  padding: 24rpx;
  text-align: center;
}
</style>
